<template>
	<view class="charts-box">
		<!-- <qiun-data-charts  type="mix" :opts="opts" :chartData="chartData" /> -->
		<qiun-data-charts  type="line" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	import request from '../../until/request.js';

	export default {
		data() {
			return {
				chartData: {},
				days: 7,
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					showTitle: false,
					xAxis: {
						
						disableGrid: true
					},
					yAxis: {
						title:"数量",
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			};
		},
		created() {
			this.getServerData(7);
		},
		methods: {
		getServerData(days) {
		  const token = uni.getStorageSync('token');
		
		  // Fetch data for 订单数 (order count)
		  uni.request({
		    url: 'http://101.126.42.213:9090/order/orderNumList',
		    method: 'GET',
		    data: {
		      days: days
		    },
		    header: {
		      'token': `${token}`
		    },
		    success: (orderRes) => {
		      // Fetch data for 激活数 (activation count)
		      uni.request({
		        url: 'http://101.126.42.213:9090/order/orderSuccessNumList',
		        method: 'GET',
		        data: {
		          days: days
		        },
		        header: {
		          'token': `${token}`
		        },
		        success: (activationRes) => {
		          console.log(orderRes, '订单数接口结果');
		          console.log(activationRes, '激活数接口结果');
		
		          const orderApiData = orderRes.data; //订单数
		          const activationApiData = activationRes.data;//激活数
		
		          const currentDate = new Date();
		          const xAxisLabels = [];
		          const orderData = [];
		          const activationData = [];
		          const activationRateData = [];
		
		          for (let i = 6; i >= 0; i--) {
		            const date = new Date(currentDate);
		            date.setDate(date.getDate() - i);
		            const month = date.getMonth() + 1;
		            const day = date.getDate();
		            const formattedDate = `${month}/${day}`;
		            xAxisLabels.push(formattedDate);
		
		            const orderCount = orderApiData[i] || 0;
		            const activationCount = activationApiData[i] || 0;
		
		            orderData.push(orderCount);
		            activationData.push(activationCount);
		
		            // Calculate activation rate and push to the activationRateData array
		            const activationRate = orderCount !== 0 ? (activationCount / orderCount) * 100 : 0;
		            activationRateData.push(activationRate.toFixed(2)); // Adjust decimals as needed
		          }
		
		          const reversedOrderData = orderData.slice().reverse();
		          const reversedActivationData = activationData.slice().reverse();
		          const reversedActivationRateData = activationRateData.slice().reverse();
		
		          // Update chartData to include 订单数, 激活数 (as bar charts), and 激活率 (as a line chart)
		          const chartData = {
		            categories: xAxisLabels,
		            series: [
		              {
		                name: "订单数",
		                type: "line", // Change the type to column
		                data: reversedOrderData,
		                yAxisIndex: 0 // Assign the series to the primary y-axis
		              },
		              {
		                name: "激活数",
		                type: "line", // Change the type to column
		                data: reversedActivationData,
		                yAxisIndex: 0 // Assign the series to the primary y-axis
		              },
		              // {
		              //   name: "激活率",
		              //   type: "column", // Change the type to line
		              //   data: reversedActivationRateData,
		              //   yAxisIndex: 1 // Assign the series to the secondary y-axis
		              // }
		            ]
		          };
		
		          this.chartData = chartData;
		        },
		        fail: (activationError) => {
		          console.error('激活数接口请求失败', activationError);
		          // Handle the error for 激活数
		        }
		      });
		    },
		    fail: (orderError) => {
		      console.error('订单数接口请求失败', orderError);
		      // Handle the error for 订单数
		    }
		  });
		},




		}
	};
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 350rpx;
	}
</style>